<script setup>
import { Modal } from 'ant-design-vue'
import { CheckCircleOutlined, ColumnHeightOutlined, DeleteOutlined, DoubleRightOutlined, DownOutlined, DownloadOutlined, EditOutlined, KeyOutlined, LockOutlined, PlusOutlined, ReloadOutlined, SearchOutlined, SettingOutlined, UndoOutlined, UpOutlined } from '@ant-design/icons-vue'
import { exportReportDetail, getHospitalList, getTradeDetail } from '~@/api/gift/index'

defineOptions({
  name: 'CardTrade',
})
const saleOptions = ref([])// 获取医院名称
const formModel = reactive({
  platRequestNo: void 0,
  appId: void 0,
  cardNo: void 0,
  tradeType: '',
  giftDate: void 0,
  cardNo: void 0,
})
const message = useMessage()
const columns = shallowRef([
  {
    title: '医院名称',
    dataIndex: 'appName',
    width: 250,
  },
  {
    title: '平台订单号',
    dataIndex: 'platRequestNo',
    width: 250,
  },
  {
    title: '原平台订单号',
    dataIndex: 'origPlatRequestNo',
    width: 250,
    customRender: ({ text }) => {
      if (text) {
        return text
      }
      else {
        return '--'
      }
    },
  },
  {
    title: '卡号',
    dataIndex: 'cardNo',
    width: 200,
  },

  {
    title: '交易类型',
    dataIndex: 'tradeType',
    width: 150,
    customRender: ({ text }) => {
      if (text === 'REFUND') {
        return '退费'
      }
      else if (text === 'DEFRAY') {
        return '消费'
      }
      else {
        return '购卡'
      }
    },

  },
  {
    title: '交易金额',
    dataIndex: 'defrayFee',
    width: 150,

  },
  {
    title: '商品名称',
    dataIndex: 'body',
    width: 200,

  },
  {
    title: '交易时间',
    dataIndex: 'completeTime',
    width: 200,

  },

])
const loading = shallowRef(false)
const totalNum = shallowRef(0)
const pagination = reactive({
  pageSize: 8,
  pageSizeOptions: ['10', '20', '30', '40'],
  current: 1,
  total: totalNum,
  showSizeChanger: true,
  showTotal: total => `总共：${total}`,
  onChange(current, pageSize) {
    pagination.pageSize = pageSize
    pagination.current = current
    init()
  },
})
const dataSource = shallowRef([])
const tradeOptions = shallowRef([
  { configKey: '', configValue: '全部' },
  { configKey: 'REFUND', configValue: '退费' },
  { configKey: 'DEFRAY', configValue: '消费' },
  { configKey: 'ACTIVE', configValue: '购卡' },
])
const tableSize = ref(['large'])
const open = ref(false)
const dropdownVisible = ref(false)
const getCheckList = computed(() => columns.value.map(item => item.dataIndex))
onMounted(() => {
  init()
  getHospital()
})
// 获取售卖商家列表
async function getHospital() {
  try {
    const { data } = await getHospitalList()
    const appData = data?.map(item => ({
      value: item.appId,
      label: item.appName,
    }))
    saleOptions.value = appData
  }
  catch (error) {

  }
  finally {

  }
};
// 按关键字搜索商户
function filterOption(input, option) {
  return option.label.toLowerCase().includes(input.toLowerCase())
}
// 查询礼品卡交易明细列表
async function init() {
  if (loading.value)
    return
  loading.value = true
  try {
    const startTime = formModel.giftDate?.[0]?.format('YYYY-MM-DD')
    const endTime = formModel.giftDate?.[1]?.format('YYYY-MM-DD')
    const { data } = await getTradeDetail({
      param: { ...formModel, startTime, endTime },
      page: {
        currentPage: pagination.current,
        pageSize: pagination.pageSize,
      },

    })

    dataSource.value = data.data ?? []
    // dataSource.value = data.data ?? []
    totalNum.value = data.pageInfo.total
  }
  catch (e) {
    console.log(e)
  }
  finally {
    loading.value = false
  }
}
// 搜索
async function onSearch() {
  pagination.current = 1
  await init()
}

// 导出
async function exportExcel() {
  if (loading.value)
    return
  loading.value = true
  try {
    const startTime = formModel.giftDate?.[0]?.format('YYYY-MM-DD')
    const endTime = formModel.giftDate?.[1]?.format('YYYY-MM-DD')
    const { data } = await exportReportDetail({ ...formModel, startTime, endTime })
    if (data.url) {
      window.location.href = data.url
    }
  }
  catch (e) {
    console.log(e)
  }
  finally {
    loading.value = false
  }
}
// 分页查询
function handleSizeChange(e) {
  tableSize.value[0] = e.key
}
function filterAction(value) {
  return columns.value.filter((item) => {
    if (value.includes(item.dataIndex))
      return true

    return false
  })
}
const filterColumns = ref(filterAction(getCheckList.value))
function handleCheckAllChange(e) {
  Object.assign(state, {
    checkList: e.target.checked ? getCheckList.value : [],
    indeterminate: true,
  })
  filterColumns.value = e.target.checked ? filterAction(getCheckList.value) : filterColumns.value.filter(item => item.dataIndex === 'action')
}
watch(
)
const expand = ref(false)
</script>

<template>
  <page-container>
    <a-card mb-4>
      <a-form :label-col="{ span: 7 }" :model="formModel">
        <a-row :gutter="[15, 0]">
          <a-col :span="8">
            <a-form-item name="giftDate" label="交易时间">
              <a-range-picker v-model:value="formModel.giftDate" allow-clear style="width:100%" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item name="platRequestNo" label="平台订单号">
              <a-input v-model:value="formModel.platRequestNo" placeholder="精确查询" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item name="tradeType" label="交易类型">
              <a-select v-model:value="formModel.tradeType" placeholder="请选择" allow-clear>
                <a-select-option v-for="item in tradeOptions" :key="item.configKey" :value="item.configKey">
                  {{ item.configValue }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item name="appId" label="医院名称">
              <a-select
                v-model:value="formModel.appId"
                allow-clear
                show-search
                placeholder="请输入关键字搜索"
                :options="saleOptions"
                :filter-option="filterOption"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item name="cardNo" label="卡号">
              <a-input v-model:value="formModel.cardNo" placeholder="精确查询" allow-clear />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-if="expand" :gutter="[15, 0]">
          <a-col :span="8">
            <a-form-item name="channelFilter" label="支付方式">
              <a-select v-model:value="formModel.channelFilter" placeholder="请选择" allow-clear>
                <a-select-option v-for="item in channelOptions" :key="item.configKey" :value="item.configKey">
                  {{ item.configValue }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :span="24" style="text-align: right">
          <a-col :span="24">
            <a-space flex justify-end w-full>
              <a-button type="primary" @click="onSearch">
                <SearchOutlined />查询
              </a-button>
              <a-button type="primary" class="ml-2" ghost @click="exportExcel()">
                <DownloadOutlined />导出
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-card>
      <a-table bordered :loading="loading" :columns="filterColumns" :scroll="{ x: 1400 }" :data-source="dataSource" :pagination="pagination">
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'defrayFee'">
            <span>{{ Number(record.defrayFee).toFixed(2) }}</span>
          </template>
          <template v-else-if="column.dataIndex === 'certNo'">
            {{ handleCertcard(record.certNo) }}
          </template>
          <template v-else-if="column.dataIndex === 'action'">
            <div class="action flex flex-center">
              <a @click="handleMenu(record)">查看</a>
              <span class="middle-line">|</span>
              <a @click="handleFunc(record)">导出</a>
            </div>
          </template>
        </template>
      </a-table>
    </a-card>
  </page-container>
</template>

    <style lang="less" scoped>
      :deep(.ant-btn){
        padding: 4px 8px;
      }
      .ant-divider-horizontal{
        margin: 15px 0;
      }
      .line{
        color:#1677ff;
      }
      .userTitle{
        color:gray;
        width: 100%;
        padding:5px 0;
        border-bottom:1px solid #f1eded;
        margin-bottom: 20px;
      }
      .red{
        color:red;
        /* color:#ff4d4f; */
      }
      .card-title{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        flex: auto;
        color: rgba(0, 0, 0, 0.88);
        font-weight: 600;
        font-size: 16px;
        line-height: 1.5;
      }
    @media screen and (max-width: 1200px) and (min-width: 992px) {
      .activeCard {
        margin-bottom: 24px;
      }
      .members {
        margin-bottom: 0;
      }
      .extraContent {
        margin-left: -44px;
        .statItem {
          padding: 0 16px;
        }
      }
    }

    @media screen and (max-width: 992px) {
      .activeCard {
        margin-bottom: 24px;
      }
      .members {
        margin-bottom: 0;
      }
      .extraContent {
        float: none;
        margin-right: 0;
        .statItem {
          padding: 0 16px;
          text-align: left;
          &::after {
            display: none;
          }
        }
      }
    }

    @media screen and (max-width: 768px) {
      .extraContent {
        margin-left: -16px;
      }
      .projectList {
        .projectGrid {
          width: 50%;
        }
      }
    }

    @media screen and (max-width: 576px) {
      .pageHeaderContent {
        display: block;
        .content {
          margin-left: 0;
        }
      }
      .extraContent {
        .statItem {
          float: none;
        }
      }
    }

    @media screen and (max-width: 480px) {
      .projectList {
        .projectGrid {
          width: 100%;
        }
      }
    }
    </style>

    <style>
      [class^="ant-checkbox-group"] [class*=" ant-checkbox-group"]{
        margin:10px !important;
        width:190px !important;
      }
</style>
